<template>
  <div class="testReport">
    <div class="left">
      <div class="left1" ref>
        <left1 class="left1"></left1>
      </div>
      <div class="left2">
        <circleImage class="circleImage"></circleImage>
      </div>
      <div class="left3">
        <Count class="count"></Count>
      </div>
    </div>
    <div class="center">
      <div class="center1">
        <broken class="broken"></broken>
      </div>
      <div class="center2">
        <broken-gif class="brokenGif"></broken-gif>
      </div>
    </div>
    <div class="right">
      <div class="right1">
        <Count class="count"></Count>
      </div>
      <div class="right2">
        <right2 class="right2"></right2>
      </div>
      <div class="right3">
        <Count class="count"></Count>
      </div>
    </div>
    <!-- <Count></Count> -->
  </div>
</template>

<script>
import NavHeader from "./../components/NavHeader";
import LeftMuen from "./../components/leftMenu";
import MainPage from "./../components/main_page";
import Count from "./../components/count";
import circleImage from "./../components/circleImage"
import broken from '@/components/broken'
import brokenGif from '@/components/brokenGif'
import left1 from '@/components/left1'
import right2 from '@/components/right2'

export default {
  data() {
    return {
      user_name: "admin",
    };
  },
  components: {
    NavHeader,
    LeftMuen,
    MainPage,
    Count,
    circleImage,
    broken,
    brokenGif,
    left1,
    right2


  },
  methods: {
    // 点击esc页面跳转
    closeScreenFull() {
      //退出全屏操作
      console.log("333333");
      // this.$router.go(-1)
    
      this.$router.push({
        name: "zcapi",
      });
    },
  },

  mounted() {
    console.log("90000");
    // this.user_name = 'bianle'
    // 接收传参
    var paramData = this.$route.query.da;
    this.user_name = paramData;
    if (this.user_name) {
      this.user_name = localStorage.getItem("user");
    }
    let self = this;
    this.$nextTick(function () {
      document.addEventListener("keyup", function (e) {
        //此处填写你的业务逻辑即可
        console.log(e.keyCode);
        if (e.keyCode == 27) {
          // console.log(e.keyCode);
          self.closeScreenFull();
        }
      });
    });
  },
};
</script>
<style lang='scss' scoped>
.testReport {
  height: 100%;
  display: flex;
  justify-content: center;
  .left {
    width: 30%;
    height: 100%;
    background: #000066;
    display: flex;
    flex-direction: column;
    .left1 {
      // border-right: yellow 1px solid;
      // border-bottom: #000033 5px solid;
      height: 35%;
      width: 100%;
      background: #000066;
      text-align: center;
      position: relative;
      .left1 {
        height: 100%;
        margin: 0 auto;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
      }
    }
    .left2 {
      // border-right: yellow 1px solid;
      // border-bottom: #000033 1px solid;
      width:98%;
      height: 30%;
      background: #0066ff;
      text-align: center;
      position: relative;
      .circleImage {
        height: 100%;
        margin: 0 auto;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
      }
    }
    .left3 {
      height: 30%;
      background: #000066;
      text-align: center;
      position: relative;
      .count {
        height: 100%;
        margin: 0 auto;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
  .center {
    width: 40%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    // text-align: center;
    .center1 {

      background: #000066;
      height: 40%;
      text-align: center;
      position: relative;
        display: flex;
         justify-content: center;
        //  text-align: center;

      .broken {
        height: 100%;
        width: 95%;
        margin: 0 auto;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
      }
    }
    .center2 {
      background: #000066;
      height: 65%;
      text-align: center;
      position: relative;
      .brokenGif {
        height: 100%;
        margin: 0 auto;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
  .right {
    width: 30%;
    height: 100%;
    background: red;
    display: flex;
    flex-direction: column;
    .right1 {

      height: 30%;
      background: #000066;
      text-align: center;
      position: relative;
      .count {
        height: 100%;
        margin: 0 auto;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
      }
    }
    .right2 {
      height: 20%;
      background: #000066;
      text-align: center;
      position: relative;
      .count {
        height: 100%;
        margin: 0 auto;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
      }
    }
    .right3 {
      height: 50%;
      background: #000066;
      text-align: center;
      position: relative;
      .count {
        height: 100%;
        margin: 0 auto;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
}
</style>


